<template>
  <footer class="bg-white text-gray-800 pt-8 pb-4 border-t border-gray-100">
    <div class="container mx-auto px-6 md:px-12">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-6 md:gap-x-12 gap-y-6 md:gap-y-8 mb-6 md:mb-8">
        <div>
          <div class="flex items-center mb-3">
            <router-link to="/" class="flex items-center">
              <img src="/同风起.png" alt="同风起科技" class="h-10 w-auto">
            </router-link>
          </div>
          <p class="text-gray-700 mb-4 leading-relaxed">
            专注于 GEO 与 SEO 搜索优化，让每个企业都能在数字世界中被精准找到。
          </p>
          <div class="flex space-x-4">
            <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-gray-600 hover:text-primary transition-colors">
              <i class="fa fa-weixin"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-gray-400 hover:text-primary transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-gray-400 hover:text-primary transition-colors">
              <i class="fa fa-linkedin"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-gray-400 hover:text-primary transition-colors">
              <i class="fa fa-youtube-play"></i>
            </a>
          </div>
        </div>

        <div>
          <h4 class="text-base font-medium mb-3 text-gray-700">服务项目</h4>
          <ul class="space-y-1.5 sm:space-y-2">
            <template v-if="activeServices.length > 0">
              <li v-for="service in activeServices" :key="service.id">
                <a href="/#services" class="text-gray-700 hover:text-primary transition-colors">{{ service.title }}</a>
              </li>
            </template>
            <template v-else>
              <li><a href="/#services" class="text-gray-700 hover:text-primary transition-colors">GEO 生成式引擎优化</a></li>
              <li><a href="/#services" class="text-gray-700 hover:text-primary transition-colors">SEO 搜索引擎优化</a></li>
              <li><a href="/#services" class="text-gray-700 hover:text-primary transition-colors">关键词策略规划</a></li>
              <li><a href="/#services" class="text-gray-700 hover:text-primary transition-colors">内容营销解决方案</a></li>
              <li><a href="/#services" class="text-gray-700 hover:text-primary transition-colors">AI 搜索优化咨询</a></li>
            </template>
          </ul>
        </div>

        <div>
          <h4 class="text-base font-medium mb-3 text-gray-700">关于我们</h4>
          <ul class="space-y-1.5 sm:space-y-2">
            <li><router-link to="/#about" class="text-gray-700 hover:text-primary transition-colors">公司简介</router-link></li>
            <li><router-link to="/careers" class="text-gray-700 hover:text-primary transition-colors">加入我们</router-link></li>
          </ul>
        </div>

        <div>
          <h4 class="text-base font-medium mb-3 text-gray-700">联系方式</h4>
          <ul class="space-y-1.5 sm:space-y-2">
            <li class="flex items-start">
              <i class="fa fa-map-marker mt-1 mr-3 text-gray-600"></i>
              <span class="text-gray-700 text-sm sm:text-base">山东省济南市槐荫区保利中科创新广场13号楼8层803、805室</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-phone mr-3 text-gray-600"></i>
              <span class="text-gray-700">400-123-4567</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-envelope mr-3 text-gray-600"></i>
              <span class="text-gray-700">windrise@windrise.cc</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-clock-o mr-3 text-gray-600"></i>
              <span class="text-gray-700">周一至周五 9:00-18:00</span>
            </li>
          </ul>
        </div>
      </div>

      <div class="border-t border-gray-100 pt-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
          <p class="text-gray-600 text-sm mb-4 md:mb-0">
            &copy; 2025 山东同风起信息科技有限公司. 保留所有权利.
          </p>
          <div class="flex space-x-6">
            <a href="#" class="text-gray-600 hover:text-primary transition-colors text-sm">隐私政策</a>
            <a href="#" class="text-gray-600 hover:text-primary transition-colors text-sm">服务条款</a>
            <a href="#" class="text-gray-600 hover:text-primary transition-colors text-sm">法律声明</a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'Footer',
  data() {
    return {
      activeServices: []
    }
  },
  mounted() {
    this.fetchActiveServices()
  },
  methods: {
    async fetchActiveServices() {
      try {
        // 从后端API获取活跃的业务服务
        const response = await fetch('/api/services')
        if (!response.ok) {
          throw new Error(`HTTP错误! 状态: ${response.status}`)
        }
        
        const data = await response.json()
        
        // 处理后端返回的数据 - 可能是直接的数组
        let servicesData = []
        
        // 检查data是否为数组（后端直接返回数组的情况）
        if (Array.isArray(data)) {
          servicesData = data
        } 
        // 或者检查是否包含services属性（兼容可能的数据格式）
        else if (data && Array.isArray(data.services)) {
          servicesData = data.services
        }
        
        // 过滤出激活状态的服务并按order排序
        if (servicesData.length > 0) {
          this.activeServices = servicesData
            .filter(service => service.is_active === true || service.is_active === 1)
            .sort((a, b) => (parseInt(a.order) || 0) - (parseInt(b.order) || 0))
          
          console.log('页脚加载的活跃服务:', this.activeServices)
        }
      } catch (error) {
        console.error('获取服务数据失败:', error)
        // 出错时保持默认显示
      }
    }
  }
}
</script>